<!-- 邀请好友 -->
<template>
	<view class="page">
		<!-- 背景图 -->
		<image class="page-bg" src="/pagesC-my/static/images/invite-friend-bg.png" mode="widthFix">
		</image>

		<view class="info-panel">
			<!-- 二维码 -->
			<view class="qrcode-content">
				<image class="img" :src="minQrcode" mode="widthFix"></image>
			</view>
			<!-- 分隔线 -->
			<view class="divider">
				<view class="dashed-line" v-for="value in 100" :key="value"></view>
			</view>
			<!-- 邀请码 -->
			<view class="invite-content">
				<image class="bg" src="/pagesC-my/static/images/invite-code-bg.png" mode="widthFix"></image>
				<view class="content">
					<text class="label">我的邀请码：</text>
					<text class="code">{{useUser.userInfo.invitation_code}}</text>
					<button class="copy-btn" @click="handleCopy(useUser.userInfo.invitation_code)">复制</button>
				</view>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="btn-group" :style="{'bottom': safeAreaBottom}">
			<button class="download-btn btn" @click="handleDownloadQrcode()">下载二维码</button>
			<button class="share-btn btn" open-type="share">立即邀请</button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app";
	import { useUserStore } from "@/store/user.js";
	import { HTTP_REQUEST_URL } from '@/config/index.js'

	const useUser = useUserStore();
	const minQrcode = ref('');

	// 底部安全区域
	const safeAreaBottom = getApp().globalData.safeAreaBottom + 'px';


	// 微信分享
	const onShareAppMessage = () => {
		return {
			title: '智慧小菜园',
			path: '/pages/index/index?scene=' + encodeURIComponent(`code=${useUser.userInfo.invitation_code}`),
			imageUrl: '/static/images/wx-login-logo.png',
		}
	}

	onLoad(() => {
		getMiniCode();
	});

	// 获取小程序码
	const getMiniCode = async () => {
		uni.request({
			url: HTTP_REQUEST_URL + '/client/user/miniCode',
			method: 'POST',
			responseType: 'arraybuffer',
			header: {
				"Content-Type": "application/x-www-form-urlencoded",
				'token': uni.getStorageSync('token'),
			},
			success: (res) => {
				minQrcode.value = 'data:image/jpeg;base64,' + uni.arrayBufferToBase64(res.data);
			}
		})

	}

	// 点击复制
	const handleCopy = (data) => {
		uni.setClipboardData({
			data,
			success: () => {
				uni.showToast({
					icon: 'success',
					title: '复制成功'
				});
			},
		});
	}

	// 下载二维码
	const handleDownloadQrcode = async () => {
		const filePath = await this.base64ToTempPath(minQrcode.value);

		uni.saveImageToPhotosAlbum({
			filePath,
			success: () => {
				uni.showToast({
					icon: 'success',
					title: '下载成功'
				});
			}
		});
	}

	// base64图片转临时路径
	const base64ToTempPath = (base64Data) => {
		return new Promise(resolve => {
			// 获取文件系统管理器
			const fileSystemManager = wx.getFileSystemManager();

			// 获取用户数据目录路径
			const filePath = wx.env.USER_DATA_PATH + '/temp_image.jpeg';

			// 去掉base64字符串的头部（如data:image/png;base64,）
			const base64Body = base64Data.split(',')[1];

			// 将base64字符串转换为二进制数据
			const base64Buffer = wx.base64ToArrayBuffer(base64Body);

			// 写入临时文件
			fileSystemManager.writeFile({
				filePath: filePath,
				data: base64Buffer,
				success: res => {
					resolve(filePath);
				},
				fail: err => {
					console.error('文件写入失败', err);
				}
			});
		})
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		z-index: 1;
		padding: 1rpx 0;

		&-bg {
			position: absolute;
			top: -25vw;
			left: 0;
			z-index: -1;
			width: 100%;
		}
	}

	.info-panel {
		margin: 90rpx 56rpx 0;
		border-radius: 10rpx;
		background-color: white;
		background: radial-gradient(circle 15rpx at 100% 210rpx, transparent 98%, white) right top no-repeat,
			radial-gradient(circle 15rpx at 0 210rpx, transparent 98%, white) left top no-repeat,
			linear-gradient(to right, white, white) right bottom no-repeat,
			linear-gradient(to right, white, white) left bottom no-repeat;
		background-size: 50% 50%;
		padding: 42rpx 36rpx 70rpx;
		box-sizing: border-box;

		.qrcode-content {
			margin: 0 auto 0;
			width: 476rpx;
			height: 476rpx;

			.img {
				width: inherit;
				height: inherit;
			}
		}

		.divider {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			height: 2rpx;
			margin-top: 54rpx;
			overflow: hidden;

			.dashed-line {
				flex-shrink: 0;
				width: 6rpx;
				height: 2rpx;
				background-color: #E5E5E5;

				&+.dashed-line {
					margin-left: 4rpx;
				}
			}
		}

		.invite-content {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 52rpx;

			.bg {
				display: block;
				width: 100%;
			}

			.content {
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
				padding: 0 16rpx 0 26rpx;
				box-sizing: border-box;

				.label {
					flex-shrink: 0;
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
				}

				.code {
					flex-grow: 1;
					font-weight: bold;
					font-size: 28rpx;
					color: #3DC85E;
				}

				.copy-btn {
					flex-shrink: 0;
					width: 114rpx;
					height: 50rpx;
					font-weight: 500;
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 48rpx;
					background: #3DC85E;
					border-radius: 24rpx;
					transition: transform 0.2s;

					&:active {
						transform: scale(0.9);
					}
				}
			}
		}
	}

	.btn-group {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0 48rpx 60rpx;
		box-sizing: border-box;

		.btn {
			width: 46%;
			height: 90rpx;
			font-size: 30rpx;
			color: white;
			line-height: 90rpx;
			border-radius: 10rpx;
			transition: transform 0.2s;

			&:active {
				transform: scale(0.9);
			}

			&.share-btn {
				background: linear-gradient(88deg, #03C02B, #3EC85F);
			}

			&.download-btn {
				background: linear-gradient(88deg, #FFCB50, #FFA933);
			}
		}
	}
</style>